<template>
  <div class="edit" :style="{height:page_height+'px'}">

    <!--S主体-->
    <cube-scroll ref="scroll">

      <!--S转让二维码-->
      <div id="transfer-qrcode">
        <img class="qrcode" :src="qrcode" />
        <h2 class="hint">被转让用户使用微信扫一扫，申请店长</h2>
      </div>
      <!--E转让二维码-->

      <!--S申请店长的用户列表-->
      <div id="list" v-if="user">
        <h2>转让用户</h2>
        <ul class="list">
          <li>
            <img class="header" :src="user.header" />
            <p class="nickname">{{user.nickname}}</p>
            <div class="buttons">
              <cube-button :inline="true" :primary="true" @click="confirmTransfer(user.id)">转让</cube-button>
              <cube-button class="delete-btn" :inline="true" @click="deleteTransfer">删除</cube-button>
            </div>
          </li>
        </ul>
      </div>
      <!--E申请店长的用户列表-->

    </cube-scroll>
    <!--E主体-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
export default {
  name: 'transfer',   //转让店长
  data(){
    return {
      page_height:store.state.height,
      store_id:0,  //门店id
      qrcode:'',  //转让二维码
      user:null,
      // user:{   //转让的目标用户
      //   id:0,  //目标用户的id
      //   nickname:'',  //目标用户的昵称
      //   header:''   //目标用户的头像
      // }
    }
  },
  created(){
    common.store()
            .then(res=>{
              if(store.state.store.position_id != 0){
                this.$router.replace('/');
                return;
              }
              if(res){
                this.store_id = res.store_id;
              }
            })
            .then(()=>{
              this.getQrcode();
            })
            .catch(error=>console.log(error));
    this.getUser();
  },
  destroyed(){
    clearInterval(store.state.transfer_timer);
  },
  methods:{
    //获取转让二维码
    getQrcode(){
      this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeStaff',
          doing:'getTransferQrcode',
          store_id:this.store_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.qrcode = res.data.data+'?time='+Date.now();
                }
              })
              .catch(error=>console.log(error));
    },
    //获取转让的用户的信息（定时器获取）
    getUser(){
      store.state.transfer_timer = setInterval(()=>{
        this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeStaff',
          doing:'getTransferUser',
          store_id:this.store_id
        }))
                .then((res)=>{
                  console.log('获取用户定时器');
                  if(res.data.status == 'success'){
                    this.user = res.data.data;
                    clearInterval(store.state.transfer_timer);
                  }
                })
                .catch(error=>console.log(error));
      },500);
    },
    //删除转让店长申请
    deleteTransfer(){
      this.confirm('确定要删除该申请吗？',()=>{
        this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeStaff',
          doing:'deleteTransfer',
          store_id:this.store_id
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.user = null;
                    this.getUser();
                  }
                })
                .catch(error=>console.log(error));
      });
    },
    //确认转让店长
    confirmTransfer(uid){
      this.confirm('确定要将店长转让给该用户吗？',()=>{
        this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeStaff',
          doing:'confirmTransfer',
          store_id:this.store_id,
          uid
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.user = null;
                    if(!sysinfo.develop){
                        wx.closeWindow();
                    }
                  }
                })
                .catch(error=>console.log(error));
      });
    },
    //cinfirm
    confirm(text,call){
      this.$createDialog({
        type:'confirm',
        content:text,
        confirmBtn: {
          text: '确定',
          active: true,
          disabled: false,
          href: 'javascript:;'
        },
        cancelBtn: {
          text: '取消',
          active: false,
          disabled: false,
          href: 'javascript:;'
        },
        onConfirm:()=>{
          call()
        },
        zIndex:400
      }).show();
    }
  }
}
</script>

<style scoped>
  #transfer-qrcode{
    padding-top:20px;
    background:#FC9153;
    box-sizing: border-box;
  }
  #transfer-qrcode img.qrcode{
    display: block;
    width:150px;
    height:150px;
    margin:0 auto 10px auto;
  }
  #transfer-qrcode h2.hint{
    height:30px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    font-size:16px;
  }
  #list h2{
    height:40px;
    line-height: 40px;
    text-align: center;
    color:#666;
    border-bottom: 1px solid #666;
  }
  #list li{
    padding:5px 10px;
    box-sizing: border-box;
    height:60px;
    line-height: 50px;
    border-bottom:1px solid #ccc;
    color:#666;
    font-size:16px;
  }
  #list img.header{
    display: block;
    width:50px;
    height:50px;
    border-radius: 50px;
    float:left;
    margin-right:10px;
    border:1px solid #eee;
    box-sizing: border-box;
  }
  #list p.nickname{
    width:170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height:100%;
    float:left;
    margin-right: 10px;
  }
  #list div.buttons{
    float:left;
  }
  #list div.buttons .delete-btn{
    margin-left:10px;
    background: red;
  }
</style>